<!-- 牛群结构-牛群列表 -->
<template>
    <!-- 筛选条件 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="选择牛号">
            <el-select clearable filterable v-model="formInline.cowId">
                <el-option v-for="item in allComNameList" :label="`${item.code}-${item.breed}-${item.genderName}`" :value="item.id" :key="item.code" />
            </el-select>
        </el-form-item>

        <el-form-item label="企业名称" v-if="companySelect">
            <el-select filterable clearable v-model="formInline.companyId">
                <el-option v-for="item in companyNameList" :label="item.name" :value="item.id" :key="item.id" />
            </el-select>
        </el-form-item>

        <el-form-item label="分类" style="width: 200px;">
            <el-select clearable v-model="formInline.group">
                <el-option v-for="(item, index) in groupList" :key="index" :label="item.name" :value="item.value" />
            </el-select>
        </el-form-item>

        <el-form-item label="性别" style="width: 200px;">
            <el-select clearable v-model="formInline.gender">
                <el-option label="母" :value="0" />
                <el-option label="公" :value="1" />
            </el-select>
        </el-form-item>

        <el-form-item label="品种" style="width: 200px;">
            <el-select clearable v-model="formInline.breed">
                <el-option v-for="(item, index) in breedList" :key="index" :label="item.name" :value="item.value" />
            </el-select>
        </el-form-item>

        <el-form-item label="状态" style="width: 200px;">
            <el-select clearable v-model="formInline.status">
                <el-option v-for="(item, index) in statusList" :key="index" :label="item.name" :value="item.value" />
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button icon="Search" @click="searchBtn">查询</el-button>
        </el-form-item>
    </el-form>

    <div class="mb-4" style="margin-bottom: 18px;">
        <el-button v-if="uploadButton" type="primary" icon="Upload" @click="isShowUpload = true">导入</el-button>
        <el-button type="success" icon="Download">导出</el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="tableData" stripe border @sort-change="sortChange" style="width: 100%;">
        <el-table-column prop="code" label="牛号" />
        <el-table-column v-if="companyColumn" prop="companyName" label="企业名称" width="200" show-overflow-tooltip />
        <el-table-column prop="breed" label="品种" width="150" />
        <el-table-column prop="groupNames" label="分类" width="120">
            <template #default="scope">
                <el-tag v-for="(item, index) in scope.row.groupNames" :key="index" type="primary" effect="plain" round size="small" style="margin-right: 5px;">{{ item }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="age" label="月龄" width="80" />
        <el-table-column prop="gender" label="性别" width="80">
            <template #default="scope">
                <span v-if="scope.row.gender == 1">公牛</span>
                <span v-if="scope.row.gender == 0">母牛</span>
            </template>
        </el-table-column>
        <el-table-column prop="birthday" sortable label="出生日期" width="120" />
        <el-table-column prop="parityValue" label="胎次" width="80" />
        <el-table-column prop="fatherCowCode" label="父亲牛号" width="150" />
        <el-table-column prop="motherCowCode" label="母亲牛号" width="150" />
        <el-table-column prop="cowStatusName" label="状态" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button v-if="editButton" type="success" icon="Edit" size="small" @click="editItem(scope.row.id)">编辑</el-button>
                <el-button v-if="deleteButton" type="danger" icon="Delete" size="small" @click="deleteItem(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <br/>
    <!-- 分页器 -->
    <el-pagination
        v-model:currentPage="pageNo"
        v-model:page-size="limit"
        :page-sizes="[15, 30, 50, 100]"
        :small="false"
        :background="true"
        layout="prev, pager, next, jumper, ->, sizes, total"
        :total="total"
        @current-change="getCattleList"
        @size-change="sizeChange"
    />

    <!-- 导入-->
    <upload :isShowUpload="isShowUpload" @closeUploadDrawer="closeUploadDrawer"></upload>

    <!-- 编辑 -->
    <edit :isShowEdit="isShowEdit" :editId="editId" @closeEditDrawer="closeEditDrawer"></edit>
    
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { reqGetCattleList } from '@/api/herdStructure'
import { reqGetCattleStatus, reqGetBreedList, reqGetGroupList } from '@/api/cattleStructure'
import { reqGetCompanyNameList } from '@/api/company'
import { reqCowNameListCowSelect } from '@/api/publicCowSelect'
import upload from './upload/index.vue'
import edit from './edit/index.vue'
// 引入用户相关小仓库
import useUserStore from '@/store/modules/user'
let userStore = useUserStore()
const companyColumn = userStore.componentConfig.companyColumn // 企业名称列-是否显示
const companySelect = userStore.componentConfig.companySelect // 企业下拉-是否显示
const addButton = userStore.componentConfig.addButton // 新增按钮-是否显示
const deleteButton = userStore.componentConfig.deleteButton // 删除按钮-是否显示
const editButton = userStore.componentConfig.editButton // 编辑按钮-是否显示
const errorButton = userStore.componentConfig.errorButton // 数据异常按钮-是否显示
const uploadButton = userStore.componentConfig.uploadButton // 导入按钮-是否显示

// 分页器当前页码
let pageNo = ref(1)
// 每一页展示多少条数据
let limit = ref(15)
// 数据总条数
let total = ref(0)

// 导入弹窗，显示隐藏
const isShowUpload = ref(false)
// 关闭导入弹窗
const closeUploadDrawer = (val) => {
    isShowUpload.value = val
    getCattleList()
}

// 编辑弹窗，显示隐藏
let isShowEdit = ref(false)
// 关闭编辑弹窗
const closeEditDrawer = (val) => {
    isShowEdit.value = val
    getCattleList()
}

// 表单数据收集
const formInline = reactive({
    companyId: '', // 企业id
    cowId: '', // 牛号
    group: '', // 分类
    gender: '', // 性别
    breed: '', // 品种
    status: '', // 状态
    sortName: '', // 排序名称
    sortType: '', // 排序类型
})

// 查询按钮
const searchBtn = () => {
    getCattleList()
}

// 获取表格数据
const tableData = ref([])
const getCattleList = async() => {
    // let res = await reqGetCattleList({
    //     pageNumber: pageNo.value, // 页号
    //     pageSize: limit.value // 每页数量
    // })
    let res = await reqGetCattleList(Object.assign(formInline, {
        pageNumber: pageNo.value, // 页号
        pageSize: limit.value // 每页数量
    }))
    if(res.status == 200){
        tableData.value = res.data.records
        total.value = res.data.totalRow
    }
}

// 编辑
let editId = ref('')
const editItem = (id) => {
    editId.value = id
    isShowEdit.value = true
}

// 删除
const deleteItem = (id) => {
    console.log('删除的id是', id)
}

// 获取企业下拉列表数据
let companyNameList = ref([])
const getCompanyNameList = async () => {
    let res = await reqGetCompanyNameList()
    companyNameList.value = res.data
}

// 获取牛号，筛选下拉列表
let allComNameList = ref([])
const cowNameListCowSelect = async () => {
    let res = await reqCowNameListCowSelect()
    allComNameList.value = res.data
}

// 获取牛状态，筛选下拉列表
let statusList = ref([])
const getCattleStatus = async () => {
    let res = await reqGetCattleStatus()
    statusList.value = res.data
}

// 获取牛品种，筛选下拉列表
let breedList = ref([])
const getBreedList = async () => {
    let res = await reqGetBreedList()
    breedList.value = res.data
}

// 获取牛群分类，筛选下拉列表
let groupList = ref([])
const getGroupList = async () => {
    let res = await reqGetGroupList()
    groupList.value = res.data
}

// 分页的下拉菜单发生改变时触发
const sizeChange = () => {
    pageNo.value = 1
    getCompanyList()
}

// 组件挂载完毕
onMounted(() => {
    cowNameListCowSelect()
    getCattleList()
    getCattleStatus()
    getBreedList()
    getGroupList()
    getCompanyNameList()
})

// 排序条件改变时触发
const sortChange = (column) => {
    console.log('排序条件改变时触发', column)
    formInline.sortName = column.prop
    formInline.sortType = column.order
    getCattleList()
}
</script>

<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 190px;
}

.demo-form-inline .el-select {
  --el-select-width: 190px;
}
</style>